
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {background-color: #45cbff;}
	#c1,span {background-color: #fff;}
	</style>
	<script>
	window.onload = function () {
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');			//绘制环境
	 	
	 	var yImg = new Image();				//图片预加载

	 	yImg.onload = function (){
	 		draw(this);
	 	};

	 	yImg.src = '66.jpg';
	/*
		createPattern(obj, 平铺方式)：设置背景
			-平铺方式：repeat、repeat-x、repeat-y、no-repeat
	*/
	 	function draw(obj) {
	 		var bg = oGC.createPattern(obj, 'repeat');		//创建背景【必须带引号】

	 		// oGC.fillStyle = 'red';
	 		oGC.fillStyle = bg;								//添加背景
	 		oGC.fillRect(0, 0, oC.width, oC.height)			//使用背景
	 	}
	}
	</script>
</head>
<body>
	<canvas id="c1" width="500" height="500">
		<span>不支持canvas的浏览器</span>
	</canvas>	<!-- 默认宽300 高150 -->
</body>
</html>